@extends("base.base")
@include('Commodity.header')
@section("main")
    <style>
        .main {
            background: #ffffff;
            min-height: 92vh;
        }

        .balance {
            font-size: 5rem;
            height: 30vh;
            line-height: 30vh;
            color: #ba3b3f;
            background: #ffffff;
            border-bottom: 0.3rem solid #f4f4f4;
        }

        .recharge {
            height: 30vh;
            padding-top: 5vh;
            background: #ffffff;
        }

        .input {
            width: 80%;
            margin: 0 auto;
        }

        .sure {

        }
    </style>
    <main id="main" class="main">
        <div id="balance" class="balance">
            ¥{{number_format($user["balance"],2)}}
        </div>
        <div id="recharge" class="recharge">
            <div class="form-group">
                <input type="text" class="input form-control" id="balanceInput" placeholder="输入充值金额">
            </div>
            <div class="form-group">
                <button class="btn btn-default sure" id="sure">充值</button>
            </div>
        </div>
    </main>
    <script>
        $(".sure").on("click", function () {
            if ($("#balanceInput").val() == "") {
                alert("请输入金额");
                return false
            }
            var data = {
                _token: csrf_token,
                balance: $("#balanceInput").val()
            }
            $.post("/api/recharge", data, function (e) {
                if (e.errorCode == 0) {
                    window.location.reload()
                } else {
                    alert(e.errorMsg)
                    window.location.reload()
                }
            }, "json")
        })
    </script>
@endsection